<template>
  <el-scrollbar class="side">
    <MenuItem :routerList="menu" />
  </el-scrollbar>
</template>

<script setup>
import { useRouter } from "vue-router";
import { computed } from "vue";
import MenuItem from "./MenuItem.vue";

const props = defineProps({
  name: {
    type: String,
    default: "manage"
  }
});

const router = useRouter();
const routerList = router.getRoutes();

const menu = computed(() => {
  console.log(
    90909090,
    routerList.filter(item => item.name == props.name)
  );
  return routerList.filter(item => item.name == props.name);
});
</script>

<style lang="scss" scoped>
.side {
  height: 100%;
  background: white;
  border-radius: 10px;
  width: 220px;
  box-shadow: 4px 5px 16px 0px rgba(4, 19, 74, 0.04);
  overflow-x: hidden;
  box-sizing: border-box;
  padding-top: 10px;
}
</style>
